<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="input-group">
                <div class="input-group-append">
                    <button class="btn btn-info" id="btnSqlFormatter" title="Shift+Alt+F 快捷格式化">格式化</button>
                </div>
                <div class="input-group-append">
                    <select class="custom-select nrSqlConfigLanguage">
                        <optgroup label="语言类型">
                            <option value="sql">SQL</option>
                            <!-- dialects -->
                            <option value="redshift">AWS Redshift</option>
                            <option value="db2">DB2</option>
                            <option value="mariadb">MariaDB</option>
                            <option value="mysql">MySQL</option>
                            <option value="n1ql">N1QL</option>
                            <option value="plsql">PL/SQL</option>
                            <option value="postgresql">PostgreSQL</option>
                            <option value="spark">Spark</option>
                            <option value="tsql">Transact-SQL</option>
                        </optgroup>
                    </select>
                </div>
                <div class="input-group-append">
                    <select class="custom-select nrSqlConfigUpperCase">
                        <optgroup label="关键字">
                            <option value="1">大写</option>
                            <option value="0">不处理</option>
                        </optgroup>
                    </select>
                </div>

                <a target="_blank" class="btn btn-warning ml-3" href="https://sqlformat.darold.net/">pgFormatter</a>
                <div class="input-group-prepend pt-2 pl-3 text-muted">
                    自动保存，可拖拽文件打开
                </div>
            </div>
        </div>
        <div class="col-md-12 mt-2">
            <div id="editor" class="border overflow-hidden position-relative">
                <i class="fa fa-arrows-alt fa-fw me-full-btn" title="Switch the full screen"></i>
            </div>
        </div>
    </div>
</div>

<script>
    function AutoHeight() {
        var ch = $(window).height() - $('#editor').offset().top - 15;
        $('#editor').css('height', Math.max(200, ch));
    }
    AutoHeight();
</script>

@Html.Raw(Netnr.SharedApp.QuoteTo.Html("sql-formatter.js,monaco-editor"))

<script>
    var editor, dv = ss.lsStr('txt') || 'SELECT * FROM table1 表名',
        scLanguage = ss.lsStr('sql-config-language') || 'sql',
        scUpperCase = ss.lsStr('sql-config-uppercase') || "1";

    $('.nrSqlConfigLanguage').change(function () {
        ss.ls["sql-config-language"] = this.value;
        ss.lsSave();
    }).val(scLanguage);

    $('.nrSqlConfigUpperCase').change(function () {
        ss.ls["sql-config-uppercase"] = this.value;
        ss.lsSave();
    }).val(scUpperCase);

    require(['vs/editor/editor.main'], function () {
        var te = $("#editor");

        editor = monaco.editor.create(te[0], ss.meConfig({
            value: dv,
            language: 'sql'
        }));

        editor.onDidChangeModelContent(function (e) {
            clearTimeout(window.defer1);
            window.defer1 = setTimeout(function () {
                ss.ls.txt = editor.getValue();
                ss.lsSave();
            }, 1000 * 1)
        });

        //快捷键
        editor.addCommand(monaco.KeyMod.Shift | monaco.KeyMod.Alt | monaco.KeyCode.KEY_F, function () {
            $('#btnSqlFormatter')[0].click();
        })
        editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.KEY_F, function () {
            $('#btnSqlFormatter')[0].click();
        })
    });

    $(window).resize(AutoHeight);

    $('#btnSqlFormatter').click(function () {
        var sf = sqlFormatter.format(editor.getValue(), {
            language: $('.nrSqlConfigLanguage').val(),
            uppercase: $('.nrSqlConfigUpperCase').val() == "1"
        });
        editor.setValue(sf);
    })

    //接收文件
    ss.receiveFiles(function (files) {
        var file = files[0];
        var reader = new FileReader();
        reader.onload = function (e) {
            editor.setValue(e.target.result);
        };
        reader.readAsText(file);
    });
</script>